<template>
	<h3>分销商
	<el-button plain type="primary" @click="pushaddtrader">
		添加分销商
	</el-button>
	</h3>
	<div class="item1">
		<el-form-item label="分销商信息" label-width="110">
			<el-input
			style="width: 205px"
			placeholder="请输入分销商昵称或手机号"
			v-model="traderInfo"
			></el-input>
		</el-form-item>
		
		<el-form-item label="分销商等级" label-width="110">
			<el-select
				style="width: 205px"
				v-model.number="traderlevel"
				clearable
				placeholder="请选择分销商等级"
			>
			<el-option
				v-for="item in leveloption"
			    :key="item.levelGrade"
			    :label="item.levelName"
			    :value="item.distributionLevelId"
			/>
			</el-select>
		</el-form-item>
	</div>
	
	<div  class="item2">
		<el-form-item label="状态" label-width="110">
			<el-select
			 style="width: 208px"
			  v-model="statu"
			  clearable
			  placeholder="选择状态"
			>
			<el-option
				v-for="item in statuoption"
				:key="item.statuId"
				:label="item.statuname"
				:value="item.statuId"
			/>
			</el-select>
		</el-form-item>
		
		<el-form-item label="添加时间" label-width="110">
			<div class="block">
			    <el-date-picker 
					style="width:186px"
					v-model="timevalue"
					type="datetimerange"
					:shortcuts="shortcuts"
					range-separator="To"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
			    />
			  </div>
		</el-form-item>
		<el-button type="primary" @click="search">搜索</el-button>
		<el-button @click="reset">重置</el-button>		
	</div>
	<el-table :data="tableData" style="width: 100%" height="35vh">
		<el-table-column prop="userName" label="分销商信息" width="130" />
		<el-table-column label="分销商等级" width="130">
			<template #default="{ row }">
			{{row.distributorLevelName}}<el-icon style="margin-left: 10px;"><EditPen @click="updatelevel(row)" /></el-icon>
			</template>
		</el-table-column>
		<el-table-column label="上级分销商" width="130">
			<template #default="{ row }">
			{{row.distributiorSuperior}}<el-icon style="margin-left: 10px;"><EditPen @click="updatersuperior(row)"/></el-icon>
			</template>
		</el-table-column>
		<el-table-column label="佣金账户"  width="130">
			<template #default="{ row }">
			<div>当前佣金:{{row.totalDistribution}}</div>
			<div>已提现:{{row.backDistribution}}</div>
			</template>
		</el-table-column>
		
		<el-table-column prop="createTime" label="添加时间"  width="130"/>
		<el-table-column prop="distributiorStatus" label="当前状态" />
		<el-table-column label="操作" style="display: block; flex-direction: column;">
			<template #default="opt" >
				<div style="display: flex; flex-direction: column;align-items: center;">
					<p class="mya" @click="detal(opt.row)">详情</p>
					<p class="mya" @click="freeze(opt.row)" >启用/禁用</p>
				</div>
				
			</template>
		</el-table-column>
	</el-table>
	
	
	<el-pagination
		layout="prev,pager,next"
		:page-count="total"
		:page-size="pageSize"
		v-model:current-page="pageIndex"	
		@current-change="changePage"
	></el-pagination>
	
	<!-- 修改分销等级 -->
	<el-dialog v-model="dialogFormVisible1" title="变更分销商等级" width="500">
	    <el-form>
	      <el-form-item label="分销商等级">
	        <el-select v-model="dleveloptionvalue" style="width: 200px;">
	         <el-option
	           v-for="item in dleveloption"
	           :key="item.distributionLevelId"
	           :label="item.levelName"
	           :value="item.distributionLevelId"
	         />
	        </el-select>
			<el-button plain @click="reload">刷新</el-button>
			<el-button type="primary" @click="goaddlevel">添加等级</el-button>
	      </el-form-item>
	    </el-form>
		
	    <template #footer>
	      <div class="dialog-footer">
	        <el-button @click="dialogFormVisible1 = false">取消</el-button>
	        <el-button type="primary" @click="sure1">
	          确定
	        </el-button>
	      </div>
	    </template>
	  </el-dialog>
	
	
	<!-- 变更上级分销商 -->
	<el-dialog v-model="dialogFormVisible2" title="变更上级分销商" width="800">
	    <el-form>
	      <el-form-item label="分销商信息">
			<el-input placeholder="请输入分销商手机号" style="width:220px ;" v-model="superinfo"></el-input>
			<el-button type="primary" @click="searchsuperior">搜索</el-button>
			<el-button  @click="superreset">重置</el-button>
	      </el-form-item>
		  <el-table :data="traderTable" style="width: 100%">
		  	<el-table-column prop="userName" label="分销商信息" width="160" />
		  	<el-table-column prop="distributorLevelName" label="分销商等级" width="160" />
			<el-table-column prop="distributiorStatus" label="当前状态" width="160" />
			<el-table-column  label="操作">
		  		<template #default="{row}">
		  			<el-button type="primary" @click="makechange(row)">选择</el-button>
		  		</template>
		  	</el-table-column>
		  </el-table>
	    </el-form>
		<el-pagination
			layout="prev,pager,next"
			:page-count="total1"
			:page-size="pageSize"
			v-model:current-page="pageIndex"	
			@current-change="changePage1"
		></el-pagination>
	  </el-dialog>
	
	<el-dialog v-model="dialogFormVisible3" title="提示" width="500">
	    <el-form>
			<div style="text-align: center;">
				<p>确认要变更上级分销商吗?</p>
			</div>
	    </el-form>
		<template #footer>
		  <div class="dialog-footer">
		    <el-button @click="dialogFormVisible3 = false">取消</el-button>
		    <el-button type="primary" @click="makesuer">
		      确定
		    </el-button>
		  </div>
		</template>
	  </el-dialog>
	
	<el-dialog v-model="dialogFormVisible4" title="提示" width="500">
	    <el-form>
			<p style="text-align: center;">确认启用/禁用该账户吗?</p>
	    </el-form>
		<template #footer>
		  <div class="dialog-footer">
		    <el-button @click="dialogFormVisible4 = false">取消</el-button>
		    <el-button type="primary" @click="freezesuer">
		      确定
		    </el-button>
		  </div>
		</template>
	</el-dialog>
	
</template>

<script setup>
import { ref,onMounted,reactive,defineExpose} from "vue";
import { 
	getTraderlist,
	getTraderLevel,
	searchTraderlist,
	updateTraderLevel,
	updatasuper,
	updatasuperTrader,
	supertradersearch,
	traderfreeze,
	traderdetail,
	refundAccount
	} from "@/api"
import { EditPen } from '@element-plus/icons-vue'
import { defineEmits } from 'vue';
import { useRoute, useRouter } from "vue-router"
import { number, time } from "echarts";
import { ElMessage } from "element-plus";
let router=useRouter()
let route=useRoute()
const emit = defineEmits(['update-message']);
let pageIndex=ref(1);
let pageSize=6;
let total=ref(0)
let total1=ref(0)
const tableData = ref([])

const goaddlevel=()=>{
	// console.log(123);
	router.push('/hidedistribute/hidedistributemanage/hidedistributelevel')
}
const statuoption=ref([
	{
		statuname:"正常",
		statuId:"1"
	},
	{
		statuname:"禁用",
		statuId:"0"
	}
])
const dialogFormVisible1=ref(false)
//获取分销商列表
const trderList = async ()=>{
	let res=await getTraderlist({
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		siteId:Number(sessionStorage.getItem("siteId")),
	})
	// console.log("分销商列表",res)
	tableData.value=res.list
	total.value=res.pageCount
}

//分销商搜索
let traderInfo=ref('')
let traderlevel=ref('')
let leveloption=ref([])
let dleveloption=ref([])
let dleveloptionvalue=ref()
let statu=ref('')
let formateDate = (data) => {
		let time = new Date(data)
		let year = time.getFullYear()
		let month = time.getMonth() + 1
		month=month<10 ? "0"+month : month
		let day = time.getDate()
		day=day<10 ? "0"+day : day
		let hour = time.getHours()
		hour=hour<10 ? "0"+hour : hour
		let minute = time.getMinutes()
		minute=minute<10 ? "0"+minute : minute
		let second = time.getSeconds()
		second=second<10 ? "0"+second : second
		return `${year}-${month}-${day} ${hour}:${minute}:${second}`
	}
const timevalue=ref()
let seachData=reactive({
		"pageIndex":pageIndex.value,
		"pageSize":pageSize,
		"siteId":Number(sessionStorage.getItem("siteId")),
		"info": traderInfo,
		"status": statu,
		"level":traderlevel,
		"startTime":timevalue,
		"endTime":''
	})
const search =async ()=>{
	let data={}
	for(var i in seachData){
		if(seachData[i]){
			data[i]=seachData[i]
		}
	}
	// console.log("data",data);
	if(data.startTime){
		data.startTime=formateDate(Array.from(timevalue.value)[0])
		data.endTime=formateDate(Array.from(timevalue.value)[1])
	}
	Object.assign(seachData,data)
	
	// console.log("seachData",seachData);
	let res=await searchTraderlist(seachData)
	// console.log(res);
	tableData.value=res.list
	total.value=res.pageCount
}
//重置
const reset=()=>{
	trderList()
	traderInfo.value=null
	traderlevel.value=null
	statu.value=null
	timevalue.value=null
		// window.location.reload()
}
//刷新
const reload=()=>{
	window.location.reload()
}
//添加等级跳转分销管理分销等级

//可选上级分销商列表
const dialogFormVisible2=ref(false)
const traderTable=ref([])
const updatersuperior = async (row)=>{
	sessionStorage.setItem("nowuserId",row.userId)
	sessionStorage.setItem("disID",row.distributorId)
	dialogFormVisible2.value=true
	// console.log(row);
	let res=await updatasuper({
		distributorId:sessionStorage.getItem("disID") ,
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		siteId:Number(sessionStorage.getItem("siteId")),
	})
	traderTable.value=res.list
	total1.value=res.pageCount
	// console.log("可选上级分销商",res)
}
//搜索可选上级分销
const superinfo=ref()
const searchsuperior = async ()=>{
	let res=await supertradersearch({
		"phone": superinfo.value,
		"pageIndex":pageIndex.value,
		"pageSize":pageSize,
		siteId:Number(sessionStorage.getItem("siteId")),
	})
	traderTable.value=res.list
	total1.value=res.pageCount
	// console.log("搜索到的可选上级分销商",res)
}
//重置
const superreset=async ()=>{
	superinfo.value='';
	let res=await supertradersearch({
		"info": superinfo.value,
		"pageIndex":pageIndex.value,
		"pageSize":pageSize,
		siteId:Number(sessionStorage.getItem("siteId")),
	})
	traderTable.value=res.list
}

//点击变更
const dialogFormVisible3=ref(false)
const makechange=(row)=>{
	sessionStorage.setItem("superuserId",row.userId)
	// console.log("22222222",row);
	dialogFormVisible2.value=false
	dialogFormVisible3.value=true
}
//点击变更的确认
const makesuer=async (row)=>{
	let res=await updatasuperTrader({
		"distributorId":Number(sessionStorage.getItem("disID")),
		"distributiorSuperior":Number(sessionStorage.getItem("superuserId")),
	})
	// console.log("已修改选定",res)
	if(typeof(res)=="object"){
		ElMessage({
			message:"修改成功",
			type:"success"
		})
	}
	trderList()
	dialogFormVisible3.value=false
}

//获取分校等级
const gettraderlevel = async ()=>{
	let res=await getTraderLevel({
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		siteId:Number(sessionStorage.getItem("siteId")),
	})
	// console.log("分销等级",res)
	leveloption.value=res.list
	// console.log("leveloption",leveloption.value);
	dleveloption.value=res.list
	// tableData.value=res.list
	// total.value=res.pageCount
}

//修改分销商等级
let rows=reactive({});
const updatelevel = async (row)=>{
	dialogFormVisible1.value=true;
	dleveloptionvalue.value=Number(row.distributionLevelId)
	rows=row
	// console.log(rows);
}

//点击修改对话框确认
const sure1=async ()=>{
	let data={
		"distributorId":rows.distributorId,
		"distributionLevelId": Number(dleveloptionvalue.value),
	}
	// console.log(data);
	let res=await updateTraderLevel(data);
	if(typeof(res)=="object"){
		ElMessage({
			message:"修改成功",
			type:"success"
		})
	}
	// console.log("修改分销等级1111111",res);
	dialogFormVisible1.value=false;
	trderList()
	// dleveloptionvalue.value=
}
//第三条信息详情调不出
let message = ref({});
let refundlist = reactive({});
let toshow =ref(0)
const detal=async (row)=>{
		sessionStorage.setItem("distributorId",row.distributorId)
		sessionStorage.setItem("nowuserId",row.userId)
		let res=await traderdetail({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			"distributorId": row.distributorId,
			// siteId:Number(sessionStorage.getItem("siteId")),
		})
		// console.log("分销商详情",res)
		message.value=res
		let rem=await refundAccount({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			"distributorId": row.distributorId,
		})
		refundlist=rem
		// console.log("佣金账户列表",refundlist)
	emit('update-message',message,refundlist,toshow);
}
	
const pushaddtrader=()=>{
	toshow.value=1;
	emit('update-message',message,refundlist,toshow);
}
//点击冻结
const dialogFormVisible4=ref(false)
const freeze=(row)=>{
	dialogFormVisible4.value=true
	sessionStorage.setItem('distributorId',row.distributorId)
}
//确认冻结
const freezesuer=async ()=>{
	let data=reactive({
		"distributorId":Number(sessionStorage.getItem("distributorId")),
	})
	let res=await traderfreeze(data)
	// console.log("冻结",res);
	if(typeof(res)=="object"){
		ElMessage({
			message:"操作成功",
			type:"success"
		})
	}
	dialogFormVisible4.value=false
	trderList()
}

const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  }
]

//分页
const changePage=(page)=>{
	seachData.pageIndex=page
	// pageIndex.value=page;
	// console.log(pageIndex.value);
	// trderList()
	search()
}
// const changePage1=(page)=>{
	
// 	pageIndex.value=page;
// 	console.log(pageIndex.value);
// 	// trderList()
// 	search()
// }

const changePage1= async(page)=>{
	pageIndex.value=page
	let res=await updatasuper({
		distributorId:sessionStorage.getItem("disID") ,
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		siteId:Number(sessionStorage.getItem("siteId")),
	})
	traderTable.value=res.list
	total1.value=res.pageCount
	// updatersuperior()
	// seachData.pageIndex=page
	// pageIndex.value=page;
	// console.log(pageIndex.value);
	// trderList()
	// search()
}



onMounted(()=>{
	trderList()
	gettraderlevel()
	
	// updatersuperior()
	// viptixianList()
	// finceruning()
})
</script>

<style lang="less" scoped>
	:deep(.cell){
		display: block;
	}
	.item2,.item1{
		display: flex;
		// margin-left: 50px;
	}
	.el-button{
		margin-left: 15px;
	}
	h3{
		// margin-left: 50px;
		margin-bottom: 20px;
		// margin-top: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-right: 100px;
	}
	.mya{
		display: inline-block;
		color: #4b5db9;
		width: 65px;
		text-align: center;
		cursor: pointer;
	}
</style>